<template>
    <view class="content">
        <uni-row class="cell">
            <uni-col :span="8"> <view class="cell-left">用户名</view> </uni-col>
            <uni-col :span="16">
                <view class="cell-right">{{ userInfo.userName }}</view>
            </uni-col>
        </uni-row>
        <uni-row class="cell">
            <uni-col :span="8"> <view class="cell-left">账号</view></uni-col>
            <uni-col :span="16">
                <view class="cell-right">{{ userInfo.account }}</view>
            </uni-col>
        </uni-row>
        <uni-row class="cell">
            <uni-col :span="8"> <view class="cell-left">角色</view></uni-col>
            <uni-col :span="16">
                <view class="cell-right">{{ userInfo.roles }}</view>
            </uni-col>
        </uni-row>
        <uni-row class="cell" @click="handleChangePassword">
            <uni-col :span="8"> <view class="cell-left">修改密码</view></uni-col>
            <uni-col :offset="14" :span="2">
                <view class="cell-right">
                    <uni-icons type="forward" color="rgb(214, 215, 217)" size="30"></uni-icons>
                </view>
            </uni-col>
        </uni-row>
        <uni-row class="cell">
            <uni-col :span="8"> <view class="cell-left">应用版本</view></uni-col>
            <uni-col :span="16">
                <view class="cell-right">{{ userInfo.version }}</view>
            </uni-col>
        </uni-row>
        <uni-row class="cell" @click="handleCheckUpdate">
            <uni-col :span="24"> <view class="cell-left">更新版本</view></uni-col>
        </uni-row>

        <uni-row class="cell">
            <uni-col :span="8"> <view class="cell-left">URL</view></uni-col>
            <uni-col :span="16">
                <view class="cell-right">{{ userInfo.baseUrl }}</view>
            </uni-col>
        </uni-row>

        <!-- 退出登录 -->
        <button class="action-button" style="color: #fff; background: red" @click="handleLogout">退出登录</button>

        <!-- 显示下载进度 -->
        <u-modal :show="showModal" :show-confirm-button="false" :show-cancel-button="false">
            <view class="modal-content">
                <view class="modal-content__company">
                    {{ downloadInfo.company }}
                </view>
                <view class="modal-content__progress">
                    <u-line-progress :percentage="downloadInfo.progress" active-color="#19BE6B"></u-line-progress>
                </view>
            </view>
        </u-modal>
    </view>
</template>

<script lang="ts" setup>
import { ENV } from '@/constant';
import useIndex from './useIndex';

const { userInfo, printBrand, showModal, downloadInfo, handleChangePassword, handleCheckUpdate, handleLogout } =
    useIndex();
</script>

<style lang="scss" scoped>
.content {
    margin-left: 30rpx;
    margin-right: 30rpx;
}

.cell {
    height: 100rpx;
    display: flex;
    align-items: center;
    border-bottom: 1px rgb(214, 215, 217) solid;
}

.cell-left {
    text-align: left;
}

.cell-right {
    text-align: right;
}

.info-title {
    color: #3c9cff;
}

.modal-content {
    width: 100%;
    padding: 20rpx;

    &__company {
        margin-bottom: 14rpx;
    }
}
</style>
